<template>
	<view class="index">
		<view class="page-body">
			<view class="page-section">
				<view class="uni-list">
					<checkbox-group @change="checkboxChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="index">
							<view class="check-box">
								<checkbox :value="item.name" :checked="item.checked" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
			</view>
		</view>
		<view class="btn-row">
			<button type="primary" class="primary" @tap="confirm">确定</button>
		</view>
	</view>
</template>
<script>
	
	import utils from '../../common/utils.js';
	import service from '../../service.js';
	
	export default {
		data() {
			return {
				title: 'checkbox',
				items: [],
				list: [],
				data: []
			}
		},
		onLoad(res) {
			uni.setNavigationBarTitle({
				title: res.title
			});
			let data = service.PAGE_DATA.pop();
			if(data.checkData) {
				this.data = data.checkData.split(',');
			}
			this.list = JSON.parse(JSON.stringify(data.list));
			this.initChecked();
		},
		methods: {
			initChecked: function(){
				this.list.forEach((item)=> {
					if(this.data.indexOf(item.name) > -1) {
						item.checked = true;
					}
					this.items.push(item);
				});
			},
			checkboxChange: function (e) { 
				let values = e.target.value;
				//console.log(values);
				this.items.forEach((item)=> {
					if(values.indexOf(item.name) > -1) {
						item.checked = true;
					}else {
						item.checked = false;
					}
				});
			},
			confirm: function() {
				let data = [], ids = [];
				
				this.items.forEach((item)=> {
					if(item.checked) {
						data.push(item.name);
						ids.push(item.id);
					}
				});
				utils.exeCallBack(data, ids);
				uni.navigateBack({delta:1});
			},
			
		}
	}
</script>

<style>
	.index{
		width: 100%;
	}
	.uni-list-cell {
		justify-content: flex-start
	}
	
	.check-box {
		width: auto;
	}
	
</style>
